import React from 'react'
import {DataTable} from 'primereact/datatable'
import {Column} from 'primereact/column'
import {Button} from 'primereact/button'
import {Dialog} from 'primereact/dialog'

import BidNamesDlog from './dlog/bidNamesDlog'

class BidNamesData extends React.Component{
  constructor(){
    super()

    this.state={
      assets:[
        {name: '1', cost: '2', transferId:'3', time:'4'},
        {name: '1', cost: '2', transferId:'3', time:'4'},
        {name: '1', cost: '2', transferId:'3', time:'4'},
        {name: '1', cost: '2', transferId:'3', time:'4'},
        {name: '1', cost: '2', transferId:'3', time:'4'},
        {name: '1', cost: '2', transferId:'3', time:'4'},
      ]
    }
  }

  render(){
    return (
      <DataTable value={this.state.assets}>
        <Column field="name" header="名字" />
        <Column field="cost" header="出价" />
        <Column field="transferId" header="交易ID" />
        <Column field="time" header="出价事件" />
      </DataTable>
    )
  }
}

class BidNames extends React.Component{
  constructor(){
    super()

    this.state={
      bidNameVisible:false
    }
  }
  
  render(){
    return (
      <div className="p-g">
        <div className="p-g-12">
          <BidNamesData />
        </div>

        <div className="p-g-12" style={{textAlign:'center'}}>
          <Dialog
            id='trade'
            visible={this.state.bidNameVisible} 
            width="700px" 
            modal={true} 
            onHide={(e) => this.setState({bidNameVisible: false})}
          >
            <BidNamesDlog />
          </Dialog>
          <Button label='我要拍卖' 
          onClick={(e) => this.setState({bidNameVisible: true})}/>
        </div>
      </div>
    )
  }
}

export default BidNames